<template>
  <div class='wrapper'>
    <div class="Dynamic">
      <div class="Dynamic-title">
        <h1>楼盘动态(81)</h1>
        <p>查看全部<span class="iconfont ">&#xe743</span></p>
      </div>
      <div class="Dynamic-content">
        <ul class="list" ref="list">
          <li class="item" >
          <div class="item-title">
            <i class="title-dt">动态</i>
            2020-04-22
          </div>
          <h4>融创玖樟台普通住宅均价11500元</h4>
          <p class="show-tow-line" ref="showtowline">
            融创玖樟台普通住宅均价11500元/平方米。预计2020年12月31日1期交楼。在售户型有：86平-137平3居-4居。容积率3.2。物业费：3.38元/㎡·月。融创玖樟台毛坯交房。项目规划建设1709户。秋长街道岭湖村迎宾大道。项目为高层,超高层板塔结合。敬请关注。融创玖樟台鸟瞰图
            融创玖樟台普通住宅均价11500元/平方米。预计2020年12月31日1期交楼。在售户型有：86平-137平3居-4居。容积率3.2。物业费：3.38元/㎡·月。融创玖樟台毛坯交房。项目规划建设1709户。秋长街道岭湖村迎宾大道。项目为高层,超高层板塔结合。敬请关注。融创玖樟台鸟瞰图
            融创玖樟台普通住宅均价11500元/平方米。预计2020年12月31日1期交楼。在售户型有：86平-137平3居-4居。容积率3.2。物业费：3.38元/㎡·月。融创玖樟台毛坯交房。项目规划建设1709户。秋长街道岭湖村迎宾大道。项目为高层,超高层板塔结合。敬请关注。融创玖樟台鸟瞰图
          </p>
          <div class="btnShow" ref="btnShow" @click="btnShow">全文</div>
        </li>
        </ul>
        <div class="bottom-btn">
          <span class="iconfont">&#xe76a</span>
          <span>变动通知我</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Dynamic',
    data () {
      return {

      }
    },
    // 方法
    methods: {
      btnShow () {
        const list = this.$refs.list
        const dom = this.$refs.showtowline
        const btn = this.$refs.btnShow
        console.log(list)
        // 多个元素时，需要获取当前下标，修改当前下标的类名！！！！
        if (dom.className === '') {
          dom.className = 'show-tow-line'
          btn.innerHTML = '全部'
        } else {
          dom.className = ''
          btn.innerHTML = '收起'
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .Dynamic
    wrapper()
    margin-top .5rem
    TopBorder()

  .Dynamic-title
    display flex
    justify-content space-between
    line-height 1.3rem

  .Dynamic-title h1
    font-size .35rem
    font-weight bolder

  .Dynamic-title p
    line-height 1.3rem
  .item
    margin .2rem 0 .4rem

  .item-title
    background none
    color #bcbfc5
    line-height .4rem

  .item-title .title-dt
    background #5bd4f5
    font-style normal
    color #fff
    font-size .293333rem
    height .48rem
    line-height .48rem
    position relative
    margin-right .16rem
    padding 0 .16rem
    border-radius .186667rem 0 .186667rem 0

  .item h4
    font-weight bolder
    line-height .5rem
    font-size .3rem


  .item p
    margin .1rem 0
    font-size .3rem
    line-height .5rem
    color #798089


  .item .show-tow-line
    max-height 1rem
    overflow hidden
    overflowEllipsis2()


  .btnShow
    font-size .3rem
    font-weight 500
    line-height .48rem
    color #00b3ea

  .bottom-btn
    background #fcfdf5
    line-height 1rem
    color #a2c412
    border-radius .1rem
    display flex
    justify-content center
    align-items center
    margin-bottom .4rem

  .bottom-btn img
    width .5rem
    height .5rem
</style>
